<template>
  <div class="youmubiao-container">
    <div class="mubiao" :style="bg">
      <div class="star" >
        <span>
          <van-icon size="25px" color="#fff" name="star-o" />
        </span>
        9999
      </div>

      <div class="mubiaoContent">
        <img src="@/assets/userImg.jpg" alt="">
        <span>8分钟内做一组腿部放松运动</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      bg: {
        backgroundImage: 'url(' + require('../../assets/mubiao.jpg') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'
      }

    }
  }
}
</script>

<style lang='less' scoped>
  .youmubiao-container {
    .mubiao {
      width: 100%;
      height: 11.1111rem;
      border-radius: .5556rem;
      background-image:url('../../assets/userImg.jpg') no-repact;
      position: relative;
      background-color: pink;
      margin: 1.1111rem 0;
      .star {
        position: absolute;
        right: 1.1111rem;
        top: 1.1111rem;
        text-align: center;
        color: #fff;
        span {
          display: block;
          width: 2.2222rem;
          height: 2.2222rem;
          background-color: rgb(91, 91, 91);
          border-radius: 100%;
          text-align: center;
          line-height: 2.2222rem;
          padding-top: .1111rem;
        }
      }
      .mubiaoContent {
        position: absolute;
        bottom: 1.1111rem;
        left: 1.1111rem;
        img {
          width: 2.7778rem;
          height: 2.7778rem;
          border-radius: 50%;
          vertical-align: middle;
          margin-right: 1.1111rem;
        }
        span{
          vertical-align: middle;
          color: #fff;
        }
      }
    }
  }
</style>
